<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>订单查询</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- basic styles -->

    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->

    <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css"/>
    <link rel="stylesheet" href="assets/css/datepicker.css"/>
    <link rel="stylesheet" href="assets/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="assets/css/chosen.css" />

    <!-- fonts -->


    <!-- ace styles -->

    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
    <!-- inline styles related to this page -->

    <!-- ace settings handler -->

    <script src="assets/js/ace-extra.min.js"></script>

</head>

<body>
<div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try {
            ace.settings.check('navbar', 'fixed')
        } catch (e) {
        }
    </script>

    <div class="navbar-container" id="navbar-container">
        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i class="icon-leaf"></i>
                    elongUI
                </small>
            </a><!-- /.brand -->
        </div>
        <!-- /.navbar-header -->


    </div>
    <!-- /.container -->
</div>

<div class="main-container" id="main-container">
<script type="text/javascript">
    try {
        ace.settings.check('main-container', 'fixed')
    } catch (e) {
    }
</script>

<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
    <span class="menu-text"></span>
</a>

<div class="sidebar" id="sidebar">
<script type="text/javascript">
    try {
        ace.settings.check('sidebar', 'fixed')
    } catch (e) {
    }
</script>


<!-- #sidebar-shortcuts -->

<ul class="nav nav-list">
<li class="">
    <a href="/">
        <i class="icon-dashboard"></i>
        <span class="menu-text"> 控制台 </span>
    </a>
</li>

<li>
    <a href="/dialog.html">
        <i class="icon-text-width"></i>
        <span class="menu-text"> 弹出框 </span>
    </a>
</li>

<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-desktop"></i>
        <span class="menu-text"> UI 组件 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="elements.html">
                <i class="icon-double-angle-right"></i>
                组件
            </a>
        </li>

        <li>
            <a href="buttons.html">
                <i class="icon-double-angle-right"></i>
                按钮 &amp; 图表
            </a>
        </li>

        <li>
            <a href="treeview.html">
                <i class="icon-double-angle-right"></i>
                树菜单
            </a>
        </li>

        <li>
            <a href="jquery-ui.html">
                <i class="icon-double-angle-right"></i>
                jQuery UI
            </a>
        </li>

        <li>
            <a href="nestable-list.html">
                <i class="icon-double-angle-right"></i>
                可拖拽列表
            </a>
        </li>

        <li>
            <a href="#" class="dropdown-toggle">
                <i class="icon-double-angle-right"></i>

                三级菜单
                <b class="arrow icon-angle-down"></b>
            </a>

            <ul class="submenu">
                <li>
                    <a href="#">
                        <i class="icon-leaf"></i>
                        第一级
                    </a>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="icon-pencil"></i>

                        第四级
                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu">
                        <li>
                            <a href="#">
                                <i class="icon-plus"></i>
                                添加产品
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-eye-open"></i>
                                查看商品
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

<li class="active">
    <a href="/jqGrid.html" class="dropdown-toggle">
        <i class="icon-list"></i>
        <span class="menu-text"> 订单查询 </span>

    </a>
</li>

<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-edit"></i>
        <span class="menu-text"> 表单 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="form-elements.html">
                <i class="icon-double-angle-right"></i>
                表单组件
            </a>
        </li>

        <li>
            <a href="form-wizard.html">
                <i class="icon-double-angle-right"></i>
                向导提示 &amp; 验证
            </a>
        </li>

        <li>
            <a href="wysiwyg.html">
                <i class="icon-double-angle-right"></i>
                编辑器
            </a>
        </li>

        <li>
            <a href="dropzone.html">
                <i class="icon-double-angle-right"></i>
                文件上传
            </a>
        </li>
    </ul>
</li>

<li>
    <a href="widgets.html">
        <i class="icon-list-alt"></i>
        <span class="menu-text"> 插件 </span>
    </a>
</li>



<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-tag"></i>
        <span class="menu-text"> 更多页面 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="profile.html">
                <i class="icon-double-angle-right"></i>
                用户信息
            </a>
        </li>

        <li>
            <a href="inbox.html">
                <i class="icon-double-angle-right"></i>
                收件箱
            </a>
        </li>

        <li>
            <a href="pricing.html">
                <i class="icon-double-angle-right"></i>
                售价单
            </a>
        </li>

        <li>
            <a href="invoice.html">
                <i class="icon-double-angle-right"></i>
                购物车
            </a>
        </li>

        <li>
            <a href="timeline.html">
                <i class="icon-double-angle-right"></i>
                时间轴
            </a>
        </li>

        <li>
            <a href="login.html">
                <i class="icon-double-angle-right"></i>
                登录 &amp; 注册
            </a>
        </li>
    </ul>
</li>

<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-file-alt"></i>

								<span class="menu-text">
									其他页面
									<span class="badge badge-primary ">5</span>
								</span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="faq.html">
                <i class="icon-double-angle-right"></i>
                帮助
            </a>
        </li>

        <li>
            <a href="error-404.html">
                <i class="icon-double-angle-right"></i>
                404错误页面
            </a>
        </li>

        <li>
            <a href="error-500.html">
                <i class="icon-double-angle-right"></i>
                500错误页面
            </a>
        </li>

        <li>
            <a href="grid.html">
                <i class="icon-double-angle-right"></i>
                网格
            </a>
        </li>

        <li>
            <a href="blank.html">
                <i class="icon-double-angle-right"></i>
                空白页面
            </a>
        </li>
    </ul>
</li>
</ul>
<!-- /.nav-list -->

<div class="sidebar-collapse" id="sidebar-collapse">
    <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
</div>

<script type="text/javascript">
    try {
        ace.settings.check('sidebar', 'collapsed')
    } catch (e) {
    }
</script>
</div>

<div class="main-content">


    <div class="page-content">
        <div class="page-header">
            <h1>
                订单查询
                <small>
                    <i class="icon-double-angle-right"></i>
                    查询支付相关订单
                </small>
            </h1>
        </div>
        <!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->

                <div class="alert alert-info">
                    <form class="form-inline">
                        <table id="sample-table-1" class="table table-bordered table-hover table-condensed table-striped" style="font-size: 12px;">
                            <tr>
                                <!--普通文本框 -->
                                <td width="10%">
                                    <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"  for="jqId"> 订单号 </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="jqId" placeholder="" class="col-xs-10 col-sm-10" />
                                    </div>
                                </div></td>

                                <td width="10%"> <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="sname"> 商户号 </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="sname" placeholder="" class="col-xs-10 col-sm-10" />
                                    </div>
                                    </div></td>

                                <td width="10%">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label no-padding-right" for="sdate"> 操作日期</label>
                                        <div class="col-sm-8">
                                            <input id="sdate" class="form-control hasDatepicker" type="text">
                                        </div>
                                    </div>
                                </td>
                                <td width="10%">
                                    <div>
                                        <label >银行名称</label>
                                        <select id="ship" >
                                            <option value="">全部</option>
                                            <option value="招商银行">招商银行</option>
                                            <option value="兴业银行">兴业银行</option>
                                            <option value="农业银行">农业银行</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>


                           </table>

                        <button class="btn btn-purple btn-sm" id="buttonForSearch" type="button">
                            Search
                            <i class="icon-search icon-on-right bigger-110"></i>
                        </button>
                        <button class="btn btn-success btn-sm" id="export" type="button">
                            Export
                            <i class="icon-calendar icon-on-right bigger-110"></i>
                        </button>


                    </form>
                </div>

               <div>
                <table id="grid-table"></table>
               </div>
                <div id="grid-pager"></div>


                <script type="text/javascript">
                    var $path_base = "/";//this will be used in gritter alerts containing images
                </script>

                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.page-content -->
</div>
<!-- /.main-content -->
<!-- /#ace-settings-container -->
</div>
<!-- /.main-container-inner -->

</div>
<!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->

<script src="assets/js/jquery.min.js"></script>

<!-- <![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
</script>

<!-- <![endif]-->


<script type="text/javascript">
    if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/typeahead-bs2.min.js"></script>

<!-- page specific plugin scripts -->

<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/bootstrap-timepicker.min.js"></script>
<script src="assets/js/daterangepicker.min.js"></script>

<!-- ace scripts -->

<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script src="assets/js/export.js"></script>
<script src="assets/js/jqgrid.js"></script>
<script type="text/javascript" src="assets/js/dialog/zDrag.js"></script>
<script type="text/javascript" src="assets/js/dialog/zDialog.js"></script>
<!-- inline scripts related to this page -->

<script type="text/javascript">

jQuery(function ($) {
    var grid_date=[];
    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";

    jQuery(grid_selector).jqGrid({
        date:grid_date,
        //地址
       // url: "/jqGrid/select.html",
        //发送数据
       // postData: {"jqId":$("#jqId").val(),"sname":$("#sname").val(),"sdate":$("#sdate").val(),"ship":$("#ship").val()},
        //发送方式
       // mtype: "get",
        datatype: "json",
        //表格高度
        height: 340,
        //列名
        colNames: ['','订单号', '商户订单号', '操作日期' ,'核销状态', '银行名称','消费方式','金额',''],
        colModel: [
            {name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                formatter: 'actions',
                formatoptions: {
                    keys: true

                    //delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback}
                    //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                }
            },
            {name: 'jqId', index: 'jqId', width: 60, sorttype: "int", editable: true,key:true},
            {name: 'sname', index: 'sname', width: 90, editable: true},
            {name: 'sdate', index: 'sdate', width: 90, editable: true, sorttype: "date", unformat: pickDate,editrules:{date:true}},
            {name: 'stock', index: 'stock', width: 70, editable: false, edittype: "checkbox", editoptions: {value:"1:0"}, unformat: aceSwitch},
            {name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: {value: "招商银行:招商银行;兴业银行:兴业银行;农业银行:农业银行"}},
            {name: 'note', index: 'note', width: 70, sortable: false, editable: false, edittype: "text"},
            {name: 'amt', index: 'amt', width: 60, sortable: false, editable: true, edittype: "text",formatter: 'number',editrules:{number:true}},

            {name: 'mybc', index: '', width: 80, fixed: true, sortable: false, resize: false,
                formatter:function(cellvalue,options,rowObject){
                    if(rowObject.stock == "No") {
                        return"<a href='javascript:void(0)' onclick='Modify("+rowObject.jqId+")'>行按钮</a>";
                    }else{
                        return"<a href='javascript:void(0)' style=\"color:red\"  onclick='Modify("+rowObject.jqId+")'>行按钮</a>";
                    }
                }
            }

        ],
        //是否显示总记录数
        viewrecords: true,
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: pager_selector,
        altRows: true,
        //toppager: true,
        //是否可以多选checkbox
        multiselect: true,
        //multikey: "ctrlKey",
        multiboxonly: true,
        //是否显示总数
        footerrow : true,
        userDataOnFooter : true,
        //回调加载表格样式
        loadComplete: function (xhr) {
            var table = this;
            setTimeout(function () {
                styleCheckbox(table);
                updateActionIcons(table);
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        editurl: $path_base + "jqGrid/update.html",//nothing is saved
        caption: "数据展示",
        autowidth: true



    })

    //enable search/filter toolbar
    //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})


    //navButtons
    jQuery(grid_selector).jqGrid('navGrid', pager_selector,
            { 	//navbar options
                edit: true,
                editicon: 'icon-pencil blue',
                add: true,
                addicon: 'icon-plus-sign purple',
                del: true,
                delicon: 'icon-trash red',
                view: true,
                viewicon: 'icon-zoom-in grey',
                search:false,
                refresh:false

            },
            {
                //edit record form
                //closeAfterEdit: true,
                recreateForm: true,

                beforeShowForm: function (e) {

                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                },
                afterComplete:function(xhr){
                   // alert(xhr.responseText);
                },
                closeAfterEdit: true
            },
            {
                //new record form
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }

                ,
                afterComplete:function(xhr){
                    alert(xhr.responseText);
                },
                closeAfterAdd: true
            },
            {
                //delete record form
                recreateForm: true,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    if (form.data('styled')) return false;

                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);

                    form.data('styled', true);
                },
                onClick: function (e) {
                    alert(1);
                },
                afterComplete:function(xhr){
                    alert(xhr.responseText);
                }
            },
            {
                //view record form
                recreateForm: true,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            }
    ).jqGrid('navButtonAdd',pager_selector,{
                buttonicon:'icon-globe purple',
                caption:'',
                position:'last',
                title:'查看历史记录',
                onClickButton:function(){
                    //获得某行id
                    var gr = jQuery("#grid-table").jqGrid('getGridParam', 'selrow');
                    //获得某行数据
                    var grr = jQuery("#grid-table").jqGrid('getRowData',gr);
                    if (gr != null) {
                        var diag = new Dialog();
                        diag.Width = 600;
                        diag.Height = 300;
                        diag.Title = "历史数据展示";
                        diag.URL = "/left.html?id="+gr;
                        diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
                        diag.show();

                    }
                    else alert("Please Select Row");

                }
            }).jqGrid('navButtonAdd',pager_selector,{
                buttonicon:'icon-eye-open',
                caption:'',
                position:'last',
                title:'表单验证',
                onClickButton:function(){
                    debugger;
                    //获得某行id
                    var gr = jQuery("#grid-table").jqGrid('getGridParam', 'selrow');
                    //获得某行数据
                    var grr = jQuery("#grid-table").jqGrid('getRowData',gr);
                    if (gr != null) {
                        var diag = new Dialog();
                        diag.Width = 600;
                        diag.Height = 300;
                        diag.Title = "表单验证";
                        diag.URL = "/form.html";
                        diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
                        diag.show();

                    }
                    else alert("Please Select Row");

                }
            })


    //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

});


$("#buttonForSearch").click(function(){
    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";
    $(grid_selector).jqGrid('setGridParam', {
        url: "/jqGrid/select.html",
        //发送数据
        postData: {"jqId":$("#jqId").val(),"sname":$("#sname").val(),"sdate":$("#sdate").val(),"ship":$("#ship").val()},
        loadComplete: function (xhr) {
            //alert("查询完成"+xhr.result);
        }
    }).trigger("reloadGrid");//重新载入

});

$("#buttonForEdit").click(function(){
    var gr = jQuery("#grid-table").jqGrid('getGridParam', 'selrow');
    if (gr != null) jQuery("#grid-table").jqGrid('editGridRow',
                                                  gr,
                                                { height: 300, reloadAfterSubmit: false



    });
    else alert("Please Select Row");
});

$("#buttonForInsert").click(function(){
    jQuery("#grid-table").jqGrid('editGridRow', "new", { height: 300, reloadAfterSubmit: false });
});

$("#buttonForDelete").click(function(){
    debugger;
         var ids=$('#grid-table').jqGrid('getGridParam','selarrrow');
        if (gr != null){
            var result=jQuery("#grid-table").jqGrid('delGridRow', gr, { reloadAfterSubmit: false });
        alert(result);}
        else alert("Please Select Row to delete!");

});


//日历函数
$( "#sdate" ).datepicker({
    showOtherMonths: true,
    selectOtherMonths: false,
    format: 'yyyy-mm-dd',
    autoclose: true
});


$('#export').click(function() {
    var title = "jqGrid报表";
    getXlsFromTbl('grid-table', 'resultList', title, true)
});

function Modify(id){
    if(id!=null)
    var grr = jQuery("#grid-table").jqGrid('getRowData',id);
    var stock;
    if(grr.stock =="Yes")stock="No";
    if(grr.stock =="No")stock="Yes";

    $.ajax({
        url:"/jqGrid/update.html?oper=edit&jqId="+id+"&stock="+stock,
        type:"post",
        success:function(){
            alert("成功");
            $("#grid-table").jqGrid('setGridParam', {
                url: "/jqGrid/select.html",
                //发送数据
                postData: {"sname":$("#sname").val(),"note":$("#note").val(),"sdate":$("#sdate").val(),"ship":$("#ship").val()}
            }).trigger("reloadGrid");//重新载入
        }

    })


}

</script>
</body>
</html>
